<template>
  <Card>
    <Row type="flex"
         align="middle"
         justify="space-between"
         class="margin-b-20">
      <Select style="width:200px"
              v-model="formSearch.storeId"
              @on-change="changeFormSearch"
              clearable>
        <Option v-for="(item, index) in shopList"
                :key="index"
                :value="item.id">{{ item.storeName }}</Option>
      </Select>
      <Button icon="md-add"
              type="primary"
              @click="onAddStaffModal()">添加管理员</Button>
    </Row>
    <Table border
           :loading="tableLoading"
           :columns="staffList"
           :data="alarmList">
    </Table>
    <Row type="flex"
         class="margin-t-20">
      <Page :total="pageTotal"
            @on-change="changePage" />
    </Row>

    <Modal v-model="addStaffModel"
           :title="staffType ? '编辑管理员' :'添加管理员'"
           :loading="loading"
           :mask-closable="false"
           @on-ok="onStaffSubmit"
           @on-visible-change="onAddStaffVisible">
      <Form ref="addStaffForm"
            :model="staff"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="所属场馆"
                  prop="storeId">
          <Select style="width:200px"
                  v-model="staff.storeId"
                  clearable>
            <Option v-for="(item, index) in shopList"
                    :key="index"
                    :value="item.id">{{ item.storeName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="姓名"
                  prop="nickname">
          <Input v-model="staff.nickname"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="岗位">
          <Input v-model="staff.job"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="入职时间">
          <DatePicker v-model="staff.inJobTimeStr"
                      type="date"
                      @on-change="changeBirthday"
                      placeholder="入职时间"
                      style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem label="电话">
          <Input v-model="staff.phone"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="账号"
                  prop="account">
          <Input v-model="staff.account"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="密码"
                  prop="pwd">
          <Input v-model="staff.pwd"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="状态">
          <i-switch size="large"
                    v-model="staff.state">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>
<script>
import { mapGetters } from 'vuex'
import { formatDateTime } from '@/libs/util'
import { staffList, addStaff, updateStaff, deleteStaff } from '@/api/setting-staff'
export default {
  data () {
    return {
      loading: true,
      tableLoading: false,
      staffType: 0,
      staff: {
        account: '',
        nickname: '',
        phone: '',
        job: '',
        pwd: '',
        state: true,
        storeId: '',
        inJobTime: '',
        inJobTimeStr: ''
      },
      ruleValidate: {
        account: [{ required: true, message: '请入输账号', trigger: 'blur' }],
        storeId: [
          { required: true, type: 'number', message: '请选择场馆', trigger: 'change' }
        ],
        nickname: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      staffList: [
        {
          title: '姓名',
          key: 'nickname'
        },
        {
          title: '岗位',
          key: 'job'
        },
        {
          title: '入职时间',
          key: 'inJobTime',
          render: (h, params) => {
            return h('span', {
              style: {
              }
            }, formatDateTime(params.row.inJobTime))
          }
        },
        {
          title: '电话',
          key: 'phone'
        },
        {
          title: '账号',
          key: 'account'
        },
        {
          title: '所属场馆',
          key: 'storeId',
          render: (h, params) => {
            for (let i of this.shopList) {
              if (params.row.storeId === i.id) {
                return h(
                  'span',
                  {},
                  i.storeName
                )
              }
            }
          }
        },
        {
          title: '状态',
          key: 'state',
          render: (h, params) => {
            const state = params.row.state
            return h(
              'span',
              {
                style: {
                  color: state ? '#000' : '#CB4C66'
                }
              },
              state ? '启用' : '禁用'
            )
          }
        },
        {
          title: '操作',
          width: 150,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.onAddStaffModal(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.deleteStaff(params.row.id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      alarmList: [],
      addStaffModel: false,
      pageTotal: 0,
      // 筛选条件
      formSearch: {
        size: 10,
        page: 1,
        storeId: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'shopList'
    ])
  },
  created () {
    this.getStaffList()
  },
  methods: {
    onAddStaffModal (info) {
      this.addStaffModel = true
      if (info) {
        this.staffType = 1
        this.staff = { ...info }
      } else {
        this.staffType = 0
      }
    },
    getStaffList () {
      this.tableLoading = true
      staffList(this.formSearch).then(res => {
        this.alarmList = res.data.rows
        this.pageTotal = res.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onAddStaffVisible (visible) {
      // 弹框状态改变 清除默认值
      if (visible) return
      this.$refs['addStaffForm'].resetFields()
    },
    onStaffSubmit () {
      this.$refs['addStaffForm'].validate(valid => {
        // eslint-disable-next-line no-useless-return
        setTimeout(() => {
          this.loading = false
        }, 300)
        setTimeout(() => {
          this.loading = true
        }, 400)
        if (!valid) return
        this.staffType ? this.updateStaff() : this.addStaff()
      })
    },
    addStaff () {
      addStaff(this.staff).then(res => {
        this.$refs['addStaffForm'].resetFields()
        this.addStaffModel = false
        this.$Message.success('添加成功')
        this.getStaffList()
      })
    },
    updateStaff () {
      console.log(this.staff)
      updateStaff(this.staff).then(res => {
        this.$refs['addStaffForm'].resetFields()
        this.addStaffModel = false
        this.$Message.success('修改成功')
        this.getStaffList()
      })
    },
    deleteStaff (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除？',
        loading: true,
        okText: '删除',
        onOk: () => {
          deleteStaff(id)
            .then(res => {
              this.$Modal.remove()
              this.$Message.success('删除成功')
              this.getStaffList()
            })
            .catch(() => {
              this.$Modal.remove()
            })
        }
      })
    },
    changePage (val) {
      this.formSearch = { ...this.formSearch, page: val }
      this.getStaffList()
    },
    changeFormSearch (storeId) {
      this.formSearch = {
        ...this.formSearch,
        size: 10,
        page: 1,
        storeId: storeId
      }
      this.getStaffList()
    },
    changeBirthday (e) {
      this.staff.inJobTime = e
    }
  }
}
</script>
<style lang="less">
.userAssets {
  position: relative;
  font-size: 16px;
  text-align: center;
  .userAssets-num {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
